<template>
  <div class="pass-wrap">
    <div class="pass-box">
      <div class="employ-info">
        <img :src="userUrl" class="pic4" v-if="userUrl!='' && userUrl!=null" onclick="return false"/>
        <div class="pic4" v-else></div>
        <div class="link-box">
          <span class="name">{{userName}}（{{workName}}_{{postName}}）</span>
          <div class="real-box">
            <span class="real" :class="{'active1':isReal==1}">{{isReal == 0?"未实名认证":"已实名认证"}}</span><span
            class="num">{{userTel}}</span>
          </div>
        </div>
        <img src="./phone.png" class="pic5" @click="call(userTel)" onclick="return false"/>
      </div>
    </div>

    <div class="pass-con">
      <span class="title">真实姓名:</span>
      <div class="con-box">
        <input class="content" placeholder="请输入员工真实姓名" maxlength="5" @blur="inputBlur" v-model="name"/>
      </div>
    </div>
    <div class="pass-con">
      <span class="title">身份证号:</span>
      <div class="con-box">
        <input class="content" placeholder="请输入员工身份证号" maxlength="18" @blur="inputBlur" v-model="certNo"/>
      </div>
    </div>

    <div class="btn-box" v-show="hideBtn">
      <button type="button" class="btn" @click="confirmPass">确定</button>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"

  export default {
    data() {
      return {
        userUrl: "",
        userName: "",
        workName: "",
        postName: "",
        isReal: "",
        userTel: "",
        name: "",
        certNo: "",
        id: "",
        mechanismId: "",
        docmHeight: document.documentElement.clientHeight,//默认屏幕高度
        showHeight: document.documentElement.clientHeight,//实时屏幕高度
        hideBtn: true//显示或者隐藏
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));

      this.userUrl = this.$route.query.userUrl;
      this.userName = this.$route.query.userName;
      this.workName = this.$route.query.workName;
      this.postName = this.$route.query.postName;
      this.isReal = this.$route.query.isReal;
      this.userTel = this.$route.query.userTel;
      this.id = this.$route.query.id;
      this.mechanismId = this.$route.query.mechanismId;
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })()
      };
    },
    methods: {
      check() {//校验姓名和身份证
        let reg1 = /^[\u2E80-\u9FFF]+$/;
        let reg2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9X])$/;
        if (this.name == "" || this.name == null) {
          this.$vux.toast.text("请输入员工真实姓名", "middle");
          return;
        } else if (!reg1.test(this.name)) {
          this.$vux.toast.text("请输入员工中文姓名", "middle");
          return;
        }
        if (this.certNo == "" || this.certNo == null) {
          this.$vux.toast.text("请输入员工真实身份证号", "middle");
          return;
        } else if (!reg2.test(this.certNo)) {
          this.$vux.toast.text("请输入正确的身份证号，最后一位是字母时要大写", "middle");
          return;
        }
        return true;
      },
      call(mobile) {//拨号
        window.location.href = 'tel://' + mobile;
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      confirmPass() {
        if (this.check()) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let data = {
            "type":2,
            "userName": this.name,
            "identityNo": this.certNo,
            "id": this.id
          };
          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/update_work_order?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          //面试通过添加实名信息
          this.axios.post(baseUrl + "/resident/update_work_order?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time, data).then((res) => {
            let resultObj = res.data;
            this.$vux.loading.hide();
            if (resultObj.code == 0) {
              if (resultObj.data == 0) {
                this.$vux.toast.text("面试通过操作失败，请重试", "middle");
              } else {
                this.$router.push({path: "/employlist", query: {"id": this.mechanismId}});
              }
            } else {
              this.$vux.toast.text(resultObj.msg, "middle");
            }
          }).catch(() => {
            this.$vux.loading.hide();
            this.$vux.toast.text("网络异常", "middle");
          });
        }
      }
    },
    watch: {
      showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.hideBtn = false;
        } else {
          this.hideBtn = true;
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .pass-wrap
    wh(100%, 100%)
    overflow: hidden
    background: rgba(242, 242, 242, 1)
    .pass-box
      wh(100%, 2.133rem)
      background: #FFF
      display: flex
      align-items: center
      margin-bottom: 0.267rem
      .employ-info
        display: flex
        align-items: center
        position: relative
        margin-left: 0.32rem
        margin-right: 0.373rem
        wh(100%, 1.387rem)
        .pic4
          margin-right: 0.293rem
          wh(1.387rem, 1.387rem)
          background: rgba(242, 242, 242, 1)
          border-radius(50%)
          box-sizing: border-box
        .link-box
          display: flex
          flex-direction: column
          .name
            size-color(0.453rem, rgba(51, 51, 51, 1))
            margin-bottom: 0.133rem
          .real-box
            margin-top: 0.133rem
            .real
              margin-right: 0.267rem
              size-color(0.373rem, rgba(255, 187, 76, 1))
            .active1
              color: $color
            .num
              size-color(0.373rem, rgba(102, 102, 102, 1))
        .pic5
          position: absolute
          right: 0
          top: 0.107rem
          wh(0.533rem, 0.533rem)
    .pass-con
      fj(space-between, center)
      wh(100%, 1.2rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      .title
        margin-left: 0.307rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .con-box
        display: flex
        align-items: center
        flex: 1
        height: 1.2rem
        margin-right: 0.307rem
        .content
          text-align: right
          wh(100%, 0.6rem)
          line-height: 0.6rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
    .btn-box
      position: absolute
      bottom: 1.173rem
      fj(center, center)
      wh(100%, 1.28rem)
      .btn
        wh(90.4%, 1.28rem)
        line-height: 1.28rem
        background: rgba(60, 175, 255, 1)
        size-color(0.453rem, rgba(255, 255, 255, 1))
        border-radius(0.16rem)
</style>
